import styles from "./index.module.scss";
import classNames from "classnames";

interface IInputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: React.ReactNode;
  errorMsg?: string;
}

function Input({ className, errorMsg, extra, ...restProps }: IInputProps) {
  return (
    <div className={styles.root}>
      <div className="input-box">
        <input className={classNames("input", className)} {...restProps} />
        <div className="validate">{errorMsg}</div>
        <div className="extra">{extra}</div>
      </div>
    </div>
  );
}

export default Input;
